<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新用户审核</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../admin/css/account/userCheck.css" />
</head>

<body>
    <div class="page-container">
        <form class="layui-form" action="">
            <div class="search-form">
                <div class="layui-row">
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" id="name" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入关键词"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs3 search-btn">
                        <button type="button" class="layui-btn layui-btn-container layui-bg-blue" id="btnQuery">搜索</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
                    </div>
                </div>
            </div>
        </form>
        <div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-user-check" lay-filter="test-user-check"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="operation-check">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="isShowUser">
        <input type="checkbox" name="{{d.mode}}" value="{{d.mode}}" title="正常|禁用" lay-skin="switch"
            lay-filter="isShowUser" {{d.mode == 1 ? "checked" : ""}} >
    </script>
    <script type="text/html" id="toolbarUserCheck">
        <div class="layui-btn-container">
            <button class="layui-btn layui-bg-blue" lay-event="createData">
                <i class="layui-icon layui-icon-add-1"></i>
                通过选中
            </button>
            <button class="layui-btn layui-btn-primary" lay-event="deleteData">
                <i class="layui-icon layui-icon-delete"></i>
                删除选中
            </button>
        </div>
    </script>
    <script>
        layui.use(['table', 'dropdown', 'form', 'jquery', 'layer', 'laydate'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form;
            var $ = layui.jquery;
            var laydate = layui.laydate;

            form.render('select');
            form.render('radio');
            var start = "#startTime", end = "#endDate";//开始时间选择框、结束时间选择框：文本框
            var startTime = laydate.render({
                elem: '#startTime',
                max: '2099-12-31 23:59:59',
                done: function (value, date) {
                    endTime.config.min = {
                        year: date.year,
                        month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
                }
            })
            // 结束时间
            var endTime = laydate.render({
                elem: '#endTime',
                max: '2099-12-31 23:59:59',
                done: function(value, date){
                    startTime.config.max = {
                        year: date.year,
                        month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
                }
            });
            // 创建渲染实例
            table.render({
                elem: '#test-user-check',
                url: '../../../admin/data/empty.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: '#toolbarUserCheck',
                defaultToolbar: ['filter', 'exports', 'print'],
                height: 'full-35', // 最大高度减去其他容器已占有的高度差
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                page: true,
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field:'id', fixed: 'left', width:80, title: 'ID'},
                    {field:'username', fixed: 'left', title: '用户名'},
                    { field: 'nickname', fixed: 'left', title: '昵称'},
                    { field: 'email', fixed: 'left', title: '邮箱' },
                    { field: 'tel', fixed: 'left', title: '手机号' },
                    { field: 'team', fixed: 'left', title: '战队' },
                    { field: 'company', fixed: 'left', title: '所属单位' },
                    { field: 'created_at', fixed: 'left', title: '创建时间' },
                    { field: '操作', title: '操作', width: 120, toolbar: '#operation-check' }
                ]],
                done: function () {
                    var id = this.id;
                    // 下拉按钮测试
                    dropdown.render({
                        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                        data: [{
                            id: 'add',
                            title: '添加'
                        }, {
                            id: 'update',
                            title: '编辑'
                        }, {
                            id: 'delete',
                            title: '删除'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id)
                            var data = checkStatus.data; // 获取选中的数据
                            switch (obj.id) {
                                case 'add':
                                    layer.open({
                                        title: '添加',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'update':
                                    if (data.length !== 1) return layer.msg('请选择一行');
                                    layer.open({
                                        title: '编辑',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'delete':
                                    if (data.length === 0) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.msg('delete event');
                                    break;
                            }
                        }
                    });
                }
            });
            // 工具栏事件
            table.on('toolbar(test-user-check)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'userCheck':
                        PearAdmin.instances.tabPage.changePage({
                            id: 'account-team-newteam',
                            title: '新用户审核',
                            url: 'view/account/user/userCheck.html',
                            close: true
                        });
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义工具栏图标按钮');
                        break;
                };
            });
            // 表头自定义元素工具事件 --- 2.8.8+
            table.on('colTool(test-user-check)', function (obj) {
                var event = obj.event;
                console.log(obj);
                if (event === 'email-tips') {
                    layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                        title: '当前列属性配置项'
                    });
                }
            });

            // 触发单元格工具事件
            table.on('tool(test-user-check)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                // console.log(obj)
                if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑 - id:' + data.id,
                        type: 1,
                        area: ['80%', '80%'],
                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                    });
                } else if (obj.event === 'more') {
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '查看',
                            id: 'detail'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'detail') {
                                layer.msg('查看操作，当前行 ID:' + data.id);
                            } else if (menudata.id === 'del') {
                                layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    // 向服务端发送删除指令
                                });
                            }
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    })
                }
            });

            // 触发表格复选框选择
            table.on('checkbox(test-user-check)', function (obj) {
                console.log(obj)
            });

            // 触发表格单选框选择
            table.on('radio(test-user-check)', function (obj) {
                console.log(obj)
            });

            // 行单击事件
            table.on('row(test-user-check)', function (obj) {
                //console.log(obj);
                //layer.closeAll('tips');
            });
            // 行双击事件
            table.on('rowDouble(test-user-check)', function (obj) {
                console.log(obj);
            });

            var upload = layui.upload;
            
            //图片上传
            upload.render({
                elem: '#test-upload-img' //绑定元素
                ,url: '/upload/' //改为你的图片上传接口
                ,size: 1024 //设置文件最大可上传大小，单位KB
                ,exts: 'jpg|png|gif' //设置可上传文件的扩展名
                ,done: function(res){
                //上传完毕回调
                if(res.code == 0){
                    //假设返回的res.data是图片链接
                    $('#demo-upload-img').append('<img src="'+ res.data +'" alt="上传成功" class="layui-upload-img">');
                }
                }
                ,error: function(){
                //请求出错的处理
                console.log('上传失败');
                }
            });
            //图片上传
            upload.render({
                elem: '#logo-upload-img' //绑定元素
                ,url: '/upload/' //改为你的图片上传接口
                ,size: 1024 //设置文件最大可上传大小，单位KB
                ,exts: 'jpg|png|gif' //设置可上传文件的扩展名
                ,done: function(res){
                //上传完毕回调
                if(res.code == 0){
                    //假设返回的res.data是图片链接
                    $('#logo-upload-img').append('<img src="'+ res.data +'" alt="上传成功" class="layui-upload-img">');
                }
                }
                ,error: function(){
                //请求出错的处理
                console.log('上传失败');
                }
            });
        });
    </script>
</body>

</html>